<template>
  <el-container style="flex-direction:column;">
    <el-row style="padding-bottom: 10px;">
      <el-button v-if="getMenuListByPath.add" type="primary" size="mini" icon="el-icon-plus" @click="add">新增</el-button>
      <el-button v-if="getMenuListByPath.update" type="success" size="mini" icon="el-icon-edit" :disabled="multipleSelection.length !== 1"  @click="handleEdit(null,multipleSelection[0])">修改</el-button>
      <el-button v-if="getMenuListByPath.delete" type="danger" size="mini" icon="el-icon-delete" :disabled="multipleSelection.length == 0" @click="deleteHandleClick">删除</el-button>
    </el-row>
    <el-table
      @selection-change="selectionChange"
      :data="tableData" size="mini"
      style="width: 100%">
      <el-table-column align="center" header-align="center"
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
          type="index"
          width="50">
      </el-table-column>
      <el-table-column align="center" header-align="center"
        prop="name"
        label="无人 车位置">
      </el-table-column>
      <el-table-column align="center" header-align="center"
        prop="phone" width="100"
        label="代理人电话">
      </el-table-column>
      <el-table-column align="center" header-align="center"
        prop="username"
        label="代理人">
      </el-table-column>
      <el-table-column align="center" header-align="center" show-overflow-tooltip
        prop="dayTime"
        width="140"
        label="营业时间">
        <template slot-scope="scope">
          {{scope.row.validtimeStart}}- {{scope.row.validtimeEnd}}
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center"
        prop="isShow"
        label="营业">
        <template slot-scope="scope">
          <el-switch
            @change="isShowSwitchChange(scope.row)"
            :value="scope.row.isShow ==1?true:false"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center"
        prop="delivery"
        label="外送">
        <template slot-scope="scope">
          <el-switch
            @change="deliverySwitchChange(scope.row)"
            :value="scope.row.delivery ==1?true:false"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" v-if="getMenuListByPath.update || getMenuListByPath.delete" width="160" align="center" header-align="center" fixed="right">
        <template slot-scope="scope">
          <el-button style="margin-right:3px;" v-if="getMenuListByPath.update"
            size="mini"  type="primary"
            @click="handleEdit(scope.$index, scope.row)"  icon="el-icon-edit"></el-button>
          <el-popconfirm v-if="getMenuListByPath.delete"
            placement="top"
            confirm-button-text='确定'
            cancel-button-text='取消'
            icon="el-icon-delete"
            icon-color="red"
            title="确定删除本条数据吗？"
            @confirm="handleDelete(scope.$index, scope.row)"
          >
            <el-button
              size="mini" slot="reference"
              type="danger" icon="el-icon-delete"></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <Store_add_or_update_dialogVue
      :title="title"
      :form="storeDialogForm"
      :visible.sync="visible"
      :getMenuListByPath="getMenuListByPath"
      @closeDialog="closeDialog"
      @operationFrom="operationFrom"
    ></Store_add_or_update_dialogVue>
  </el-container>
</template>

<script>
import Store_add_or_update_dialogVue from "./components/Store_add_or_update_dialog.vue";
import {getAllStore,deleteStoreById,deleteStoreByIdList,updateStore} from '@/api/modules/StoreManagement/storeList.js'
export default {
  props:["getMenuListByPath"],
  components:{
    Store_add_or_update_dialogVue
  },
  data() {
    return {
      title:"",
      visible: false,
      tableData: [],
      multipleSelection: [],
      size:5,
      storeDialogForm:{},
    }
  },
  created() {
    this.getAllStore(1,this.size)
  },
  methods: {
    isShowSwitchChange(e){
      // console.log(e)
      let data =JSON.parse(JSON.stringify(e))
      data.isShow = data.isShow == 1? 0 : 1;
      updateStore(data).then(()=>{
        this.getAllStore()
      })
    },
    deliverySwitchChange(e){
      // console.log(e)
      let data =JSON.parse(JSON.stringify(e))
      data.delivery = data.delivery == 1? 0 : 1;
      updateStore(data).then(()=>{
        this.getAllStore()
      })
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.storeDialogForm = JSON.parse(JSON.stringify(row))
      this.title="编辑门店";
      this.visible=true;
    },
    handleDelete(index, row) {
      // console.log(index, row);
      deleteStoreById({id:row.storeId}).then(()=>{
        this.getAllStore()
      })
    },
    selectionChange(val){
      this.multipleSelection = val;
    },
    //删除按钮点击事件
    deleteHandleClick(){
      let data = [];
      for(let j=0 ; j < this.multipleSelection.length; j++) {
        data.push(this.multipleSelection[j].storeId);
      }
      deleteStoreByIdList(data).then(()=>{
        this.getAllStore()
      })
    },
    //打开dialog
    add(){
       this.storeDialogForm={
        "storeId": null,
				"shopownerId": null,
				"name": null,
				"phone": null,
        "validtimeStart": null,
        "validtimeEnd": null,
        "isShow": 1,
        "delivery": 0,
        "username": null,
        "freight":0,
      }
      this.title="新增门店";
      this.visible=true;
    },
    //关闭dialog
    closeDialog(){
      this.visible=false;
    },
    //操作dialog表单，刷新数据
    operationFrom(){
      this.closeDialog();
      this.getAllStore();
    },
    getAllStore(){
      getAllStore().then(res=>{
        this.tableData = res.data.data
      })
    }
  }
}
</script>

<style>

</style>
